<!-- 添加、修改、详情页里的表格 -->
<template>
  <div class="zw-list-frame">
    <div class="zw-list-frame-top">
      <div class="zw-list-frame-top_title">{{ props.title }}</div>
      <slot name="buttons"></slot>
    </div>
    <div class="zw-list-frame-table">
      <el-table :show-summary="showSummary" :summary-method="summaryMethod" class="table" border
        :header-cell-style="{ 'background-color': '#409eff', color: '#fff' }" show-overflow-tooltip
        :data="innerTableData" style="width: 100%" :row-class-name="tableRowClassName"
        header-cell-class-name="header-cell" :highlight-current-row="false">
        <el-table-column v-if="showIndexColumn" fixed label="序号" type="index" width="60"
          align="center"></el-table-column>
        <template v-for="(item) in props.columns" :key="item.prop">
          <el-table-column v-if="item.fixed" show-overflow-tooltip align="center" :prop="item.prop"
            :label="item.colName" :width="item.width === -1 ? '*' : item.width" :fixed="item.fixed" />
          <el-table-column v-else show-overflow-tooltip align="center" :prop="item.prop" :label="item.colName"
            :width="item.width === -1 ? '*' : item.width" />
        </template>
        <el-table-column v-if="showOperations" width="120" fixed="right" align="center" label="操作">
          <template #default="{ row }">
            <slot name="operations" :value="row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="zw-list-frame-pager">
      <el-pagination layout="sizes, prev, pager, next, jumper, ->, total" v-model:current-page="page.pageNo"
        v-model:page-size="page.pageSize" :total="props.total" @size-change="sizeChanged" @current-change="pageChanged"
        :page-sizes="sizeList" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { h, ref, watch, type VNode } from 'vue';
import type { ColumnType } from '../types';
import type { PageVO } from '@/server/page-type';

const props = withDefaults(defineProps<{
  title: string,
  total: number,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  tableData: any[],
  columns: ColumnType[],
  innerControl: boolean,
  showOperations?: boolean,
  showSummary?: boolean,
  summaryColumns?: string[],
  showIndexColumn?: boolean,
}>(), {
  title: "",
  total: 0,
  tableData: () => [],
  columns: () => [],
  innerControl: true,
  showOptions: false,
  showSummary: false,
  summaryColumns: () => [],
  showIndexColumn: false
})
const tableRowClassName = ({
  rowIndex,
}: {
  row: unknown
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'odd-row'
  }
  return 'even-row'
}
const page = ref<PageVO>({
  pageNo: 1,
  pageSize: 5,
  total: 0
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const innerTableData = ref<any[]>([]);
const sizeList = ref<number[]>([])
for (let index = 5; index <= 100; index += 5) {
  sizeList.value.push(index)
}
const emits = defineEmits(["sizeChanged", "pageChanged"])
const sizeChanged = (value: number) => {
  if (props.innerControl) {
    pageData()
    return;
  }
  emits("sizeChanged", value)
}
const pageChanged = (value: number) => {
  if (props.innerControl) {
    pageData()
    return;
  }
  emits("pageChanged", value)
}
const pageData = () => {
  const startIndex = (page.value.pageNo - 1) * page.value.pageSize;
  const endIndex = startIndex + page.value.pageSize;

  // 返回对应页数据
  innerTableData.value = props.tableData.slice(startIndex, endIndex);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const summaryMethod = (prop: { columns: any[], data: any[] }) => {
  const { columns, data } = prop;
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: {} }, [
        '合计',
      ])
      return
    }
    // 如果当前需要计算合计
    if (props.summaryColumns.some(x => x === column.property)) {
      const values = data.map((item) => Number(item[column.property]))
      if (!values.every((value) => Number.isNaN(value))) {
        sums[index] = `${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)}`
      } else {
        sums[index] = 'N/A'
      }
    } else {
      sums[index] = ''
    }
  })

  return sums
}
watch(() => props.tableData.length, () => {
  pageData();
}, { immediate: true })
</script>
<style lang="scss" scope>
.zw-list-frame {
  display: flex;
  flex-direction: column;
  padding: 0px 36px;

  &-top {
    display: flex;
    height: 36px;
    line-height: 36px;
    align-items: center;
    margin: 0px 0px 8px 0;

    &_title {
      font-size: 18px;
      font-weight: 800;
      padding: 0px 20px 0px 8px;
      margin: 8px 0px;
      color: v.$primary-color;
      border-left: 4px solid v.$color-border;
    }
  }

  &-pager {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center
  }
}
</style>
